<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="/lib/layui-v2.6.3/css/layui.css" media="all">
    <link rel="stylesheet" href="/css/public.css" media="all">
    <title>角色物品查询</title>
</head>
<body>
    <div class="layuimini-container" id="app">
        <div class="layuimini-main">
            <fieldset class="table-search-fieldset">
                <legend>角色物品查询</legend>
                <div style="margin: 10px">
                    <form action="" lay-filter="top-form" class="layui-form">
                        <div class="layui-form-item">
                            <label class="layui-form-label">选择区服:</label>
                            <div class="layui-input-inline">
                                <select name="gameArea" class="layui-select" lay-ignore>

                                    <option v-for="(item,index) in services" :value="item.server_id" :selected="index==0">{{item.name}}</option>
                                </select>
                            </div>
                            <label class="layui-form-label">角色名</label>
                            <div class="layui-input-inline">
                                <input type="text" class="layui-input" placeholder="请输入角色全称" name="roleName">
                            </div>
                            <label class="layui-form-label">角色ID</label>
                            <div class="layui-input-inline">
                                <input type="text" class="layui-input" placeholder="请输入角色ID" name="roleId">
                            </div>
                            <div class="layui-inline">
                                <button type="submit" class="layui-btn layui-btn-primary"
                                        lay-submit lay-filter="data-search-btn"><i class="layui-icon"></i> 搜 索</button>
                            </div>
                        </div>
                    </form>
                </div>
            </fieldset>
            <div class="layui-form" v-show="isSearched==true">
                <div class="layui-form-item">
                    <label class="layui-form-label">区服: </label>
                    <div class="layui-input-inline">
                        <span class="layui-form-mid "> {{detail.zoneId}}</span>
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">账号: </label>
                    <div class="layui-input-inline">
                        <span class="layui-form-mid "> {{detail.member?detail.member.username:''}}</span>
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">角色ID: </label>
                    <div class="layui-input-inline">
                        <span class="layui-form-mid "> {{detail.id}}</span>
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">角色名: </label>
                    <div class="layui-input-inline">
                        <span class="layui-form-mid "> {{detail.nick}}</span>
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">等级: </label>
                    <div class="layui-input-inline">
                        <span class="layui-form-mid "> {{detail.level}}</span>
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">物品信息: </label>
                    <div class="layui-input-block">
                        <table id="equip-table" class="layui-table">
                            <thead>
                                <tr>
                                    <th>物品ID</th>
                                    <th>物品名称</th>
                                    <th>物品数量</th>
                                    <th>物品位置</th>
                                    <th>唯一ID</th>
                                    <th>操作</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr v-for="oneOfEquipment in allEquipments">
                                    <td>{{oneOfEquipment.base.id}}</td>
                                    <td>{{toEquipName(oneOfEquipment.base.id)}}</td>
                                    <td>{{oneOfEquipment.base.count}}</td>
                                    <td>
                                        <span v-if="oneOfEquipment.base.pos=='bag'">背包</span>
                                        <span v-if="oneOfEquipment.base.pos=='combat'">装备</span>
                                        <span v-if="oneOfEquipment.base.pos=='warehouse'">仓库</span>
                                        <span v-if="oneOfEquipment.base.pos=='stall'">摊位</span>
                                        <span v-if="oneOfEquipment.base.pos=='petBag'">宠物背包({{oneOfEquipment.base.petName}}),第{{oneOfEquipment.base.sort}}个</span>
                                    </td>
                                    <td>{{oneOfEquipment.base.uniqueid}}</td>
                                    <td>
                                        <button class="layui-btn layui-btn-sm layui-btn-warm" v-on:click="property(oneOfEquipment)">属性</button>
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>
</html>
<script id="propertyPop" type="text/html">
    <div id="property-pop">
        <div class="row row1 flex">
            <div class="half">
                <p>
                    {{d.detail.nick}}
                </p>
                <p style="border-top:1px solid #e5e5e5;">
                    {{toEquipName(d.oneOfEquipment.base.id)}}
                </p>
            </div>
            <div class="half">
                <p>{{d.detail.id}}</p>
                <p style="border-top:1px solid #e5e5e5;">
                    {{d.oneOfEquipment.base.id}}
                </p>
            </div>
        </div>
        <div class="row row2">
            <p>{{d.oneOfEquipment.base.count}}</p>
        </div>
        <div class="row row3" style="text-align: center;">
            <textarea class="text" style="font-weight: 100;">
                {{JSON.stringify(d.oneOfEquipment.base)}}
            </textarea>
        </div>
        <div class="row row2">
            <p>
                <input type="number" step="1" min="1" class="layui-input" placeholder="输入删除数量" style="border: 2px solid;"/>
            </p>
        </div>
        <div class="row row2">
            <button class="layui-btn layui-btn-lg layui-btn-normal">确认删除</button>
        </div>
    </div>
</script>
<script src="/lib/layui-v2.6.3/layui.js" charset="utf-8"></script>
<script src="/js/common.js?v=5" charset="utf-8"></script>
<style>
    #property-pop{
        color:white;font-weight: bold;font-size: 18px;
    }
    #property-pop .flex{
        display: flex;margin-top:20px;
        flex-direction: row;
        justify-content: space-around;
    }
    #property-pop .row{
        width:100%;
    }
    .row1 .half{
        text-align:center;line-height: 50px;
        width:160px; background: #5B9BD5;
    }
    .row2{
        margin-top: 20px;
        text-align: center;
    }
    .row2 p{
        text-align:center;line-height: 50px;
        width:160px;background: #5B9BD5;
        display: inline-block;
    }
    .row3 .text{
        width:410px;height:200px;margin:20px auto 0 auto; padding: 15px;
    }
</style>
<script>
var id = urlParam("id");

layui.use(['layer','form','table','laytpl'],function () {
    var layer = layui.layer,form=layui.form,$=layui.$,table=layui.table;
    var laytpl = layui.laytpl;
    new Vue({
        el:"#app",
        data:{
            isSearched:false,
            detail:{},
            allEquipments:[],
            services: JSON.parse(localStorage.getItem('services')),
        },
        methods:{
            searchRole:function (where) {
                var _this = this;
                _this.isSearched = true;
                _this.detail = {};
                $.get('/admin/gameRole/searchOne',where,function(res){
                    if (res.code === 0 ){
                        _this.detail = res.data;
                        var bag =  res.data.bag || [];
                        var combat  = res.data.combat.combat_equip || [];
                        var warehouse =  res.data.warehouse || [];
                        var sell_item_list = res.data.sell_item_list || [];

                        //增加 位置属性
                        for(var k in bag) bag[k].base.pos = 'bag';
                        for(var k in combat) combat[k].base.pos = 'combat';
                        for(var k in warehouse) warehouse[k].base.pos = 'warehouse';
                        for(var k in sell_item_list) sell_item_list[k].base.pos = 'stall';

                        var petPackList = [];
                        for(var k in res.data.petList){
                            var row = res.data.petList[k];
                            var petName = row.name;
                            var bagData = row.bag.data;
                            for(var k1 in bagData){
                                var row1 = bagData[k1];
                                row1.base.sort = parseInt(k)+1;
                                row1.base.petName = petName;
                                row1.base.pos = 'petBag';
                                petPackList.push(row1)
                            }
                        }
                        //合并数组
                        var allEquipments = bag.concat(combat,warehouse,sell_item_list,petPackList)

                        _this.allEquipments = allEquipments;
                    }
                });
            },
            property:function (oneOfEquipment) {
                var _this = this;
                layer.open({
                    title:"属性操作",
                    type:1,
                    shadeClose: true,
                    area: ['600px', '680px'],
                    content: laytpl($('#propertyPop').prop("innerHTML")).render({
                        detail:_this.detail,
                        oneOfEquipment:oneOfEquipment,
                    })
                });
            }
        },
        mounted:function () {
            var _this = this;
            // 监听搜索操作
            form.on('submit(data-search-btn)', function (data) {
                var formData = form.val('top-form');
                _this.searchRole(formData);
                return false;
            });
            $('[lay-ignore]').removeAttr('lay-ignore')
            form.render();
        }
    })
})

</script>